import React from 'react';
import { Form, Icon, Input, Button, message, Modal } from 'antd';
import { Link } from 'react-router-dom';
import './index.less';
import { customertoken } from '../services/servicesAccount';
import { connect } from 'react-redux';
const FormItem = Form.Item;

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  // 去修改密码
  modify = () => {
    window.location.hash = '/changePassword';
    this.setState({ visible: false });
    this.props.dispatch({
      type: 'changestatus',
      status: true
    });
  }
  // 不修改密码
  cancelModify = () => {
    this.setState({ visible: false });
    window.location.hash = '/';
    this.props.dispatch({
      type: 'changestatus',
      status: true
    });
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.Customertoken(values);
      } else {
        console.log('Received values of form: ', values);
      }
    });
  }
  // 登录
  async Customertoken(data) {
    const response = await customertoken(data);
    if(response){
      if (response.token == '') {
        message.error('用户名或密码错误');
      } else if (response.time <= 0) {
        message.warning('密码过期请修改密码');
        setTimeout(() => {
          window.location.hash = '/modifypwd';
        }, 1000);
      } else if (response.time > 0 && response.time < 604800) {
        localStorage.setItem('userName', data.username);
        localStorage.setItem('token', response.token);
        this.setState({
          visible: true
        });
      } else {
        localStorage.setItem('userName', data.username);
        localStorage.setItem('token', response.token);
        setTimeout(() => {
          window.location.hash = '/';
          this.props.dispatch({
            type: 'changestatus',
            status: true
          });
        }, 300);
      }
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login">
        <div className="img_bg">
          <div className="logo_bg">
            <a href="https://www.sinochembaas.com/" target="_blank">
              <img src={require('./img/logo.png')} alt="" className="login_logo" />
            </a>
            <img src={require('./img/bg.png')} alt="" className="login_bg" />
          </div>
        </div>
        <div className="form_r">
          <Form onSubmit={this.handleSubmit} className="registerForm login-form">
            <div className="registerCt">
              <h3 className="registerCtTop">
                <strong>登录</strong>
              </h3>
              <FormItem>
                {/* <p>用员名</p> */}
                {getFieldDecorator('username', {
                  rules: [{ required: true, message: '请输入用户名!' }]
                })(
                  <Input
                    size="large"
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="请输入用户名"
                  />
                )}
              </FormItem>
              <FormItem>
                {/* <p>密码</p> */}
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码!' }]
                })(
                  <Input
                    size="large"
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="请输入密码"
                  />
                )}
              </FormItem>
              <FormItem>
                <p className="forgot_psw">
                  <Link to="/forgetPwd">
                    <span>忘记密码?</span>
                  </Link>
                </p>
                <Button size="large" type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
              </FormItem>
              <p className="login_reg">
                还没有中化BaaS平台账号？<Link to="/Register">
                  <span className="loginBtn">立即注册</span>
                </Link>
              </p>
            </div>
          </Form>
        </div>
        <Modal
          style={{ zIndex: 1000 }}
          visible={this.state.visible}
          title="提示"
          iconType="warning"
          closable={false}
          footer={[
            <Button key="back" onClick={this.cancelModify}>
              暂不修改
            </Button>,
            <Button key="submit" type="primary" onClick={this.modify}>
              去修改
            </Button>
          ]}
        >
          <p className="textAlign_D">
            <span className="CommonTips">密码即将到期，请尽快修改密码！</span>
          </p>
        </Modal>
      </div>
    );
  }
}

const Login = Form.create()(LoginForm);
export default connect(state => {
  return { ...state };
})(Login);
